<template>
  <div id="guke">
   <el-button type="primary" >添加</el-button>
        <el-button type="primary" >查询</el-button>
        <el-input
          style="width: 240px"
          placeholder="请输入role ID"
          clearable
        >
        </el-input>
         <el-input
          style="width: 240px"
          placeholder="请输入顾客名"
          clearable
        >
        </el-input>
     <el-select v-model="gukeStatus" clearable placeholder="请选择状态">
          <el-option label="正常" value="正常"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>

        <!-- 表单开始 -->
         <el-table :data="gukedata" style="width: 100%">

                <!-- 顾客ID -->
                <el-table-column prop="id" label="顾客编号" align="center">
                </el-table-column>
                <!-- 名称 -->
                <el-table-column prop="username" label="用户名" align="center">
                </el-table-column>


                <!-- 真名 -->
                <el-table-column prop="realname" label="真名" align="center">
                </el-table-column>
                <!-- 性别 -->
                <el-table-column prop="gender" label="性别" align="center">
                </el-table-column>

                <el-table-column prop="email" label="email" align="center">
                </el-table-column>
                <!-- userFace -->
                <el-table-column prop="userFace" label="顾客头像" align="center">
                   <!-- 作用域插槽   userFace是接口-->
                  <template slot-scope="scope">
                    <el-image
                      style="width: 40px; height: 40px"
                      :src="scope.row.userFace"
                      :preview-src-list="[scope.row.userFace]"
                    >
                    </el-image>
                  </template>
                </el-table-column>
                 <!-- 注册时间 -->
                <el-table-column prop="registerTime" label="注册时间" align="center">
                  <template slot-scope="scope">
                    <span></span>
                  </template>
                </el-table-column>
                 <!-- 民族 -->
                <el-table-column prop="nation" label="民族" align="center">
                </el-table-column>
                 <!-- 民族 -->
                <el-table-column prop="status" label="状态" align="center" >
                  <template slot-scope="scope">
                    <div>
                      <el-tag type="success" size="small"  effect="dark">{{scope.row.status}}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" align="center">
                  <!-- 获取当前行 -->
                  <template slot-scope="scope">
                    <el-button @click="shanchu(scope.row.id)" type="text" size="small" >  删除 </el-button>
                    <el-button  type="text" size="small" > 编辑 </el-button>


                  </template>
                </el-table-column>
              </el-table>
        <!-- 表单结束 -->
  </div>
</template>

<script type="text/javascript">
  import {get} from  "@/utils/request";
  export default {
  data() {
    return {
      gukeStatus:'',
      gukedata:[]
    }
  },
  methods:{
    // 获取顾客信息
   async getguke(){
      const list = {
        page:1,
        pageSize:10,
        roleId:6
      }
       let res =  await get('/baseUser/pageQuery',list);
       this.gukedata = res.data.list
    }
  },
  created() {
    this.getguke()
  }
  }
</script>
